<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
  <head>
  	<c:set value="${pageContext.request.contextPath}" var="basePath"></c:set>
	<jsp:include page="include/head.jsp"></jsp:include>
	<jsp:include page="include/js.jsp"></jsp:include>
  </head>
  <body>
  
  	<div class="modal fade" id="add-activity-modal" role="dialog" aria-labelledby="add-activity-modalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<form action="${basePath}/addActivity" method="POST" id="add-activity-form">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title">Add new activity</h4>
					</div>
					<div class="modal-body">
						<fieldset>
							<div>
								<input type="text" class="form-control" placeholder="Name" name="name"/>
								<input type="hidden" name="subject_version_id" value="${subjectVersion.id}"/>
							</div>
						</fieldset>
					</div>
					<div class="modal-footer">
						<button type="submit" class="btn btn-primary" id="create-group-btn">Create</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
					</div>
				</form>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
  
    <div id="login-data">
    	Session:&nbsp;<span id="user_name">${user.name} ${user.lastname}</span>
    	<a id="icon-signout" href="${basePath}/logout"><i class="icon-signout"></i></a>
    </div>
    
    <c:if test="${alert eq 'error'}">
	    <div class="alert alert-danger alert-dismissable">
			<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
			<strong>Error.</strong> ${alertdesc}
		</div>
	</c:if>
    
    <c:if test="${alert eq 'success'}">
	    <div class="alert alert-success alert-dismissable">
			<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
			<strong>Success.</strong> ${alertdesc}
		</div>
	</c:if>
    
    <div id="container" class="container">
        <div id="row" class="row panel">
            <legend>
            	<small>${subjectVersion.name}</small>
            	<br/>
            	Activity selection
           	</legend>
            <div>  
            	<c:if test="${empty activities}">
            	The activities for this subject haven't been created yet.
            	</c:if>
            	<ul id="activityList" class="panelList nav nav-pills nav-stacked">
            		<c:forEach var="activity" items="${activities}">
            			<li data-id="${activity.id}" style="position: relative;">
            				<a href="#" class="activityA" data-id="${activity.id}">
            					<div>
            						<img class="pull-left img-rounded" style="margin-right: 10px;" src="${basePath}/resources/images/icons/task.png"/>
            						<div>
            							<strong>${activity.name}</strong>
            							<br/>
				                  		<small>&nbsp; </small>
            						</div>
            					</div>
            				</a>
            				<c:if test="${user.type eq 'teacher'}">
					            <span class="label label-default import-slides-icon" onclick="window.location='${basePath}/uploadSlides/${subjectVersion.id}/${activity.id}'">
					            	<img src="${basePath}/resources/images/icons/powerpoint.png">
					            </span>
					        </c:if>
            			</li>
            		</c:forEach>
            	</ul>
            	<c:if test="${user.type eq 'teacher'}">
	            	<span class="btn" data-toggle="modal" data-target="#add-activity-modal">
	            		<i class="icon-plus"></i>&nbsp;&nbsp;Add new activity
	            	</span>
            	</c:if>
            </div>
        </div>
    </div>
    
    <script>
      $(function() {
    	  
    	  $('#import-loading-icon').hide();

          $(".activityA").click( function() {
				window.location = '${basePath}/app/${subjectVersion.id}/' + $(this).data('id');
          });
          
      });
    </script>
    
  </body>
</html>
